<template>
    <div id="myMsg">
        <div class="title">
            <i class="el-icon-star-on"></i>
            <span>我的消息</span>
            <i class="el-icon-star-on"></i>
        </div>
        <div id="top">
            <span id="prodTitle">商品</span>
            <span id="commentTitle">留言</span>
        </div>

        <!-- <div id="msg" v-for="item in 5" :key="item.index">
            <div id="front">
                <img :src="testimage" alt="">
                <span id="name">{{testName}}</span>
            </div>
            <div id="back">
                <div id="messages" v-for="i in 5" :key="i.index">
                    <div id="title">用户<span>xzy</span>于<span>2021.6.1</span>给你留言</div>
                    <div id="comment">有议价空间吗</div>
                </div>
            </div>
        </div> -->
        <div id="msg" v-for="item in messages" :key="item.index" @click="getInfo(item.pid)">
            <div id="front">
                <img :src="item.image" alt="">
                <span id="name">{{item.name}}</span>
            </div>
            <div id="back">
                <div id="messages" v-for="i in item.comments" :key="i.index">
                    <div id="title">用户<span>{{i.username}}</span>于<span>{{i.time}}</span>给你留言:</div>
                    <div id="comment">{{i.words}}</div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import {request} from "../network/request.js"

export default {
    data(){
        return{
            testimage: 'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/178661/28/3905/138182/609d39a7Eb1a7b045/c6f860d88ffe3ffd.jpg.webp',
            testName: '百草味 冰雪蛋糕540g/箱网红饼干糕点点心整箱早餐手撕小面包麻薯夹心糯米糍',
            messages: ''
        }
    },
    methods: {
        getInfo(pid){
            this.$router.push({
                path: '/product', 
                query: { id: pid }
            })
        }
    },
    created(){
        request({
            url: '/myMsg',
            method: "get",
        }).then(res => {
            console.log(res)
            this.messages = res.data.messages
        })
    }
}
</script>

<style scoped>

#myMsg {
    background-color: #fff;
    padding-bottom: 10px;
}

.title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding-top: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    width: 200px;
}

.title i {
    padding: 5px;
}

#top {
    display: flex;
    justify-content: space-around;
    background-color: rgb(232,232,232);
    margin: 10px 10px;
    padding: 10px 0;
}

#top span {
    text-align: center;
}

#front {
    width: 40%;
    display: flex;
    justify-content: center;
}

#back {
    width: 60%;
}

#name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    width: 150px;
}

#prodTitle {
    width: 40%;
}

#commentTitle {
    width: 60%;
}

#front img {
    height: 150px;
    width: 150px;
}

#msg {
    display: flex;
    justify-content: space-around;
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    margin: 0 10px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

#title {
    font-size: 12px;
}

#title span {
    font-weight: bold;
}

#messages {
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    margin-bottom: 10px;
}

</style>